<template>
  <div class="inventory" ref="inventory">
    <my-head title="盘点明细管理"/>
    
    <mu-text-field v-model="vin" placeholder="VIN" ref="vin" class='input' @keyup.enter.native="doneVIN(true, 1)"><i class="iconfont icon-saomiao" @click="scan('vin')"></i></mu-text-field>

    <mu-paper class="paper" :z-depth="2">
      <div class="list-content">盘点单号 ：<span>{{infoForm.code}}</span></div>
      <div class="list-content">库位 ：<span class="library-position">{{infoForm.location}}</span></div>
      <div class="list-content">VIN ：<span>{{infoForm.vin}}</span></div>
      <div class="list-content">车型：<span>{{infoForm.carCode}}</span></div>
      <div class="list-content">颜色：<span>{{infoForm.color}}</span></div>
      <div class="list-content">库位数量：<span>{{infoForm.qty}}</span></div>
    </mu-paper>

    <div class="btn">
      <mu-button large color="primary" @click="doneVIN(false, 0)">盘点确认</mu-button>
      <mu-button large color="primary" @click="doneNoCar()">确认无车</mu-button>
    </div>
    <mu-dialog width="320" max-width="60%" :open.sync="openAlert">
      确认无车?
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialog('y')">确认</mu-button>
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialog('n')">取消</mu-button>
    </mu-dialog>
    <mu-dialog width="320" max-width="60%" :open.sync="openAlert1">
      该库位系统无车请确认，是否扫描正确?
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialogVIN('y')">确认</mu-button>
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialogVIN('n')">取消</mu-button>
    </mu-dialog>
    <mu-dialog width="320" max-width="60%" :open.sync="openAlert2">
      扫描车辆与系统不符，请确认?
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialogVIN('y')">确认</mu-button>
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialogVIN('n')">取消</mu-button>
    </mu-dialog>
    <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
  </div>
</template>

<script>
import myHead from '@/components/header'
import scanning from "@/components/scanning"
import api from "@/common/api"
export default {
  name: 'inventory',
  data () {
    return {
      scanMark: '',
      isScanning: false,
     openAlert: false,
     openAlert1: false,
     openAlert2: false,
     vin: '',
     infoForm: {
       code: '',
       location: '',
       vin: '',
       carCode: '',
       color: '',
       qty: ''
     },
     requestOnce: true
    }
  },
  components: {
    myHead, scanning
  },
  methods: {
    closeing (val) {
      val ? this.isScanning = false : null;
    },
    childByValue (val) {
      if(val){
        if(val.split('&')[1] == 'vin'){
          this.vin = val.split('&')[0];
          this.doneVIN(true, 1);
        }
      }
    },
    scan (txt) {
      this.scanMark = txt;
      this.isScanning = true;
    },
    closeAlertDialog (flag) {
      this.openAlert = false;
      if(flag == 'y'){
        /* 发送post请求 */
        let data = Object.assign({},this.$store.state.user, {
          content:{
            code: this.infoForm.code,
            location: this.infoForm.location,
            vin: "",
            issurevin: false
          }
        });
        this.update(data);
      }
    },
    doneNoCar () {
      this.openAlert = true;
    },
    doneVIN (issurevin, flag) {
      // if(this.infoForm.vin == ''){
      //   this.openAlert1 = true;
      // }else{
      //   if(this.infoForm.vin !== this.vin){
      //     this.openAlert2 = true;
      //   }
      // }
      /* 发送post请求 */
      let data = Object.assign({},this.$store.state.user, {
        content:{
          code: this.infoForm.code,
          location: this.infoForm.location,
          vin: flag == 1 ? this.vin : this.infoForm.vin,
          issurevin: issurevin
        }
      });
      this.update(data);
    },
    closeAlertDialogVIN(flag){
      this.openAlert1 = false;
      this.openAlert2 = false;
      if(flag == 'y'){
        /* 发送post请求 */
        let data = Object.assign({},this.$store.state.user,{
          content:{
            code: this.infoForm.code,
            location: this.infoForm.location,
            vin: this.vin
          }
        });
        this.update(data);
      }
    },
    update (data) {
      if(this.requestOnce){
        this.requestOnce = false;
        /* 发送post请求 */
        this.common.reqData(api.app('inventoryUpdate'), data, res=>{
          this.requestOnce = true;
          let datas = res.data;
          console.log(datas);
          if(datas.status == 100){
            if(datas.content){
              this.infoForm.color = datas.content.color;
              this.infoForm.location = datas.content.location;
              this.infoForm.carCode = datas.content.model;
              this.infoForm.qty = datas.content.qty;
              this.infoForm.vin = datas.content.vin;
              this.Toast.success({
                duration: 1000,
                mask: true,
                message: '已盘点'
              });
              this.vin = ''
            }else{
              this.Toast.success({
                duration: 1000,
                mask: true,
                message: '该单已盘点完成，请退出'
              });
            }
          }else{
            this.Toast.fail({
              duration: 0,
              mask: true,
              message: datas.msg
            });
          }
        },err =>{
          this.requestOnce = true;
          console.log(err)
        });
      }
    },
    resData (code) {
      let data = Object.assign({},this.$store.state.user,{
        content:{
          code: code
        }
      });
      if(this.requestOnce){
        this.requestOnce = false;
        /* 发送post请求 */
        this.common.reqData(api.app('inventoryDetail'), data, res=>{
          this.requestOnce = true;
          let datas = res.data;
          if(datas.status == 100){
            this.infoForm.code = datas.content.code;
            this.infoForm.color = datas.content.color;
            this.infoForm.location = datas.content.location;
            this.infoForm.carCode = datas.content.model;
            this.infoForm.qty = datas.content.qty;
            this.infoForm.vin = datas.content.vin;
            this.infoForm.vin == '' ? this.disableNocar = false : this.disableNocar = true;
          }else{
            this.Toast.fail({
              duration: 0,
              mask: true,
              message: datas.msg
            });
          }
        },err =>{
          this.requestOnce = true;
          console.log(err)
        });
      }
    }
  },
  mounted () {
    // 确定高度
    this.wrapperHeight = document.documentElement.clientHeight - 45
    this.resData(this.$route.params.row.code);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.inventory{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.input{
    display: block;
    margin: 15px auto;
    width: 85%;
}
.paper, .state, .msg{
    width: 85%;
    margin: 4em auto 0;
    padding: 1.5em 0;
}
.state, .msg{
    text-align: center;
    color: red;
    font-size: 1em;
}
.list-content{
    padding: 8px 20px;
}
.library-position{
    font-size: 2.2em;
    font-weight: bold;
    color: red;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.space{
    padding: 0 20px;
}
.btn{
  position: absolute;
  bottom: 20px;
  left: 7.5%;
  right: 7.5%;
  display: flex;
  justify-content: space-around;
}
.btn .mu-raised-button{
  font-size: 18px;
  height: 40px;
  line-height: 40px;
}
</style>
